.demo-logo-vertical {
    height: 50px;
}

#layout-content {
    background-color: #fff;
    position: relative;

    .ant-layout-content {
        padding: 0 24px 24px;
    }

    .system-setting {
        right: 0;
        bottom: auto;

        &:after {
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
        }
    }
}

.system-theme {


    .system-theme-style {
        display: flex;
        justify-content: space-between;
        margin-top: 24px;

        li {
            width: 80px;
            height: 50px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            position: relative;
            background-color: rgba(239, 239, 239, 0.42);

            &:hover{
                box-shadow: 0 0 10px rgba(17, 160, 243, 0.5);
                cursor: pointer;
            }

            &:before {
                content: "";
                display: block;
                width: 100%;
                height: 10px;
                background-color: #fff;
            }

            &:after {
                content: "";
                display: block;
                width: 20px;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                background-color: #fff;
            }

            &:nth-of-type(2):after {
                background-color: #001529;
            }

            &:nth-of-type(3) {
                filter: invert(1) hue-rotate(180deg);
            }
        }

        .anticon{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 3;
        }
    }
}